<template>
  <div>
    <br />
    <el-row>
      <el-tabs v-model="tabIndex" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待处理" name="1"></el-tab-pane>
        <el-tab-pane label="审批中" name="2"></el-tab-pane>
        <el-tab-pane label="实施中" name="3"></el-tab-pane>
        <el-tab-pane label="已完成" name="4"></el-tab-pane>
      </el-tabs>
    </el-row>
    <div class="tableheader">
      <span class="descs">车辆申请处置审核数({{total}}个）</span>

    </div>
    <el-table ref="multipleTable" :border="true" :data="tableData" tooltip-effect="dark" style="width: 100%" :header-cell-style="{background:'#F5F7FA'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="pbType" label="申请单位"></el-table-column>
      <el-table-column prop="applyCname" label="处置方式"></el-table-column>
      <el-table-column prop="applyReason" label="原因"></el-table-column>
      <el-table-column prop="pbTypeNum" label="车辆数量"></el-table-column>
      <el-table-column prop="person" label="经办人"></el-table-column>
      <el-table-column prop="createTime" label="申报时间"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="update(scope)" v-show="scope.row.stateValue==1">审核</el-button>
          <el-button size="mini" type="success" @click="show" v-show="scope.row.stateValue==2">调剂</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="CarpageSize" :total="Cartotal" :current-page="CarpageNo" @current-change="CarfetchData" @size-change="CarpageSizeChange"></el-pagination>
      </el-col>
    </el-row>
    <inspect-update v-if="dialogVisible" :dialog-visible.sync="dialogVisible" @finish="fetchData" :formData="formDataValue"></inspect-update>
  </div>
</template>

<script>
import { axios_req } from "@/api/carcommon";
import InspectUpdate from "./components/update";
export default {
  components: { InspectUpdate },
  data: function() {
    return {
      tabIndex: 0,
      total: 0,
      tableData: [{
        "pbType": "测试单位",
        "applyCname": "报废",
        "applyReason": "车辆老旧报废",
        "pbTypeNum": "1",
        "person": "单位管理员",
        "createTime": "2020-4-26",
        "state": "单位提交申请-通过",
        "stateValue": "1"
      }],
      dialogVisible: false,
      pageNo: 1,
      pageSize: 10,
      Cartotal: 0,
      CarpageNo: 1,
      CarpageSize: 10,
      formDataValue: {}
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleClick(tab, event) {
      var sign = event.target.getAttribute("id").split("-")[1];
      console.log(sign);
    },
    async fetchData(pageNo) { },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    update(scope) {
      console.log(scope)
      this.formDataValue = scope.row
      this.dialogVisible = true;
    },
    show() { },
    CarpageSizeChange(newSize) {
      this.CarpageSize = newSize;
      this.CarpageNo = 1;
      this.fetchData();
    },
    async CarfetchData(pageNo) { },
    add() { },
    download() { }
  }
};
</script>
<style>
[v-cloak] {
  display: none;
}

#container {
  width: 100%;
  height: 400px;
}

@media screen and (min-width: 992px) {
  .modal-dialog {
    width: 992px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}

.tableheader .descs {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
}

.upload_exl .el-upload,
.upload_exl .el-upload-dragger {
  width: 100%;
}

.upload_exl .el-upload-dragger .el-button {
  margin-top: 76px;
}
</style>